<!DOCTYPE html>
<html>
<body>
<canvas id="physicsCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = 'italic 20px serif';

    // --- Helper function to draw an arrow ---
    function drawArrow(fromx, fromy, tox, toy) {
        const headlen = 10; // length of head in pixels
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Main drawing components ---

    const centerX = 250;
    const centerY = 200;

    // 1. Incoming Plane Wave
    const waveX = [120, 135, 150];
    const waveY_start = 100;
    const waveY_end = 300;
    ctx.beginPath();
    waveX.forEach(x => {
        ctx.moveTo(x, waveY_start);
        ctx.lineTo(x, waveY_end);
    });
    ctx.stroke();
    drawArrow(160, centerY, 205, centerY);

    // 2. Slit Barrier
    const slitWidth = 100;
    const slitTopY = centerY - slitWidth / 2;
    const slitBottomY = centerY + slitWidth / 2;
    const barrierX1 = 220;
    const barrierX2 = 230;
    const barrierExtent = 40;
    ctx.beginPath();
    // Top staple-like shape
    ctx.moveTo(barrierX1, slitTopY - barrierExtent);
    ctx.lineTo(barrierX1, slitTopY);
    ctx.lineTo(barrierX2, slitTopY);
    // Bottom staple-like shape
    ctx.moveTo(barrierX2, slitBottomY + barrierExtent);
    ctx.lineTo(barrierX2, slitBottomY);
    ctx.lineTo(barrierX1, slitBottomY);
    ctx.stroke();

    // 3. Labels 'a' and 'x'
    // Label 'a' (slit width)
    const a_label_x = 200;
    ctx.beginPath();
    ctx.moveTo(a_label_x, slitTopY);
    ctx.lineTo(a_label_x, slitBottomY);
    ctx.moveTo(a_label_x - 5, slitTopY);
    ctx.lineTo(a_label_x + 5, slitTopY);
    ctx.moveTo(a_label_x - 5, slitBottomY);
    ctx.lineTo(a_label_x + 5, slitBottomY);
    ctx.stroke();
    ctx.fillText('a', a_label_x - 20, centerY + 5);

    // Label 'x'
    const x_label_x = 240;
    const x_start_y = slitTopY;
    const x_end_y = centerY - 5;
    drawArrow(x_label_x, x_start_y, x_label_x, x_end_y);
    ctx.fillText('x', x_label_x + 8, centerY - 20);

    // 4. Outgoing Rays and Angle
    const angle_rad = 22 * Math.PI / 180;
    const ray_origin_x = 260;

    // Top ray and angle
    const top_ray_origin_y = centerY - 15;
    ctx.beginPath();
    ctx.setLineDash([5, 5]);
    ctx.moveTo(ray_origin_x, top_ray_origin_y);
    ctx.lineTo(ray_origin_x + 100, top_ray_origin_y);
    ctx.stroke();
    ctx.setLineDash([]);
    drawArrow(ray_origin_x, top_ray_origin_y, ray_origin_x + 160 * Math.cos(angle_rad), top_ray_origin_y - 160 * Math.sin(angle_rad));

    ctx.beginPath();
    ctx.arc(ray_origin_x, top_ray_origin_y, 40, 0, -angle_rad, true);
    ctx.stroke();
    ctx.fillText('θ', ray_origin_x + 45, top_ray_origin_y - 5);

    // Bottom ray (parallel to top)
    const bottom_ray_origin_y = centerY + 15;
    drawArrow(ray_origin_x, bottom_ray_origin_y, ray_origin_x + 160 * Math.cos(angle_rad), bottom_ray_origin_y - 160 * Math.sin(angle_rad));

    // Small triangle showing angle theta
    const tri_origin_x = 275;
    const tri_origin_y = 230;
    const tri_height = 30;
    const tri_width = tri_height * Math.tan(angle_rad);
    ctx.beginPath();
    ctx.moveTo(tri_origin_x, tri_origin_y); // vertex P
    ctx.lineTo(tri_origin_x, tri_origin_y - tri_height); // vertical leg PQ
    ctx.lineTo(tri_origin_x + tri_width, tri_origin_y - tri_height); // horizontal leg QR
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(tri_origin_x, tri_origin_y, 18, -Math.PI/2, -Math.PI/2 + angle_rad);
    ctx.stroke();
    ctx.fillText('θ', tri_origin_x + 8, tri_origin_y - 8);

    // 5. Figure Caption
    ctx.font = 'bold 20px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 2.36', centerX, 350);
</script>
</body>
</html>